<template>
	<view class="category">
		<!-- 搜索框 -->
		<MySearch></MySearch>

		<view class="aside-main">
			<!-- 左侧滑动区 -->
			<scroll-view scroll-y class="cate_left" :style="'height:'+ mainH" scroll-with-animation>
				<view :class="num==index?'active':'active2'" v-for="(item,index) in asideList" :key="index"
					@click="asid(index)" class="left_item">
					{{item.title}}
				</view>
			</scroll-view>
			<!-- 右侧滑动区 -->
			<scroll-view scroll-y class="cate_right" :style="'height:'+ mainH" :scroll-into-view="rightview"
				scroll-with-animation @scroll="scrollright" @scrolltoupper="scrolltop" @scrolltolower="scrollbuttom">
				<!-- 功能区节点 -->
				<view v-for="(item,index) in asideList" :key="index" class="right_item" :id="'rightIndex'+index">
					<view v-for="(i,j) in item.list" :key="j" class="tag_item">
						{{item.title}}
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		getCurrentInstance
	} from 'vue'

	const mainH = ref('400')
	const num = ref(0)
	const leftview = ref('')
	const rightview = ref('')
	const nodes = ref([])
	const shopchecked = ref('自取')
	const checkedmode = (e) => {
		shopchecked.value = e
	}
	const asideList = [{
		title: "男生",
		list: new Array(10).fill({
			url: "",
			name: '',
		})
	}, {
		title: "女生",
		list: new Array(10).fill({
			url: "",
			name: '',
		})
	}, {
		title: "听书",
		list: new Array(10).fill({
			url: "",
			name: '',
		})
	}, {
		title: "图书",
		list: new Array(10).fill({
			url: "",
			name: '',
		})
	}, {
		title: "出版",
		list: new Array(10).fill({
			url: "",
			name: '',
		})
	}, {
		title: "漫画",
		list: new Array(10).fill({
			url: "",
			name: '',
		})
	}]

	onMounted(() => {
		uni.getSystemInfo({
			success: (res) => {
				mainH.value = res.windowHeight - uni.upx2px(132) + 'px'
			}
		})
		coordinate()
	})

	const asid = (index) => {
		num.value = index
		rightview.value = 'rightIndex' + index
	}

	const scrolltop = () => {
		num.value = 0
	}

	const scrollbuttom = () => {
		num.value = nodes.value.length - 1
	}

	const scrollright = (e) => {
		// console.log( nodes.value);
		for (let i = 0; i < nodes.value.length - 1; i++) { // 从0开始循环，并且减去1以避免越界
			if (e.detail.scrollTop + nodes.value[0] >= nodes.value[i] && e.detail.scrollTop + nodes.value[0] < nodes
				.value[i + 1]) {
				num.value = i;
				break; // 找到对应的索引后，退出循环
			}
		}
		// 处理边界情况
		if (e.detail.scrollTop + nodes.value[0] <= nodes.value[0]) {
			num.value = 0;
		} else if (e.detail.scrollTop + nodes.value[0] >= nodes.value[nodes.value.length - 1]) {
			num.value = nodes.value.length - 1;
		}

		// 	console.log(num.value);
	}


	const coordinate = () => {
		const instance = getCurrentInstance(); // 获取组件实例
		const query = uni.createSelectorQuery().in(instance)
		// console.log('query',query);
		query.selectAll(".right_item").boundingClientRect((data) => {
			// console.log('data',data);
			for (let i = 0; i < data.length; i++) {
				nodes.value.push(data[i].top)
			}
		}).exec()
	}
</script>

<style lang="scss">
	.category {
		padding: 0 30rpx;

		.active {
			font-size: 30rpx;
			color: #ff5e48;
		}

		.active2 {
			font-size: 30rpx;
		}

		.aside-main {
			width: 100%;
			margin-top: 26rpx;
			position: relative;

			.cate_left {
				width: 22%;
				background-color: #f0f0f0;
				position: absolute;
				left: 0;
				text-align: center;
				border-radius: 16rpx;

				.left_item {
					padding: 30rpx;
					font-size: 32rpx;
					box-sizing: border-box;
					border-bottom: 2rpx solid #fff;
				}
			}

			.cate_right {
				// "-"号 左右要有空格
				width: calc(100% - 22%);
				// 使用换行时，不要给高度
				// height: 1000rpx;
				position: absolute;
				right: 0;

				/* 隐藏滚动条 */
				::-webkit-scrollbar {
					display: none;

				}

				.tag_item {
					width: 112rpx;
					height: 40rpx;
					padding: 20rpx;
					border: 1px solid #ccc;
					text-align: center;
					margin-left: 20rpx;
					margin-bottom: 20rpx;
					border-radius: 20rpx;
					font-size: 28rpx;

					/* 调整每个标签的宽度 */
					flex: 0 0 auto;
					/* 防止缩放 */

				}
			}

		}

	}
</style>